<template>
  <div class="container">
    <div class="logo">
      <van-image
        width="15rem"
        height="10rem"
        fit="contain"
        src="/static/images/logo.png"
      />
    </div>
    <div class="form">
      <div class="cover">
        <van-cell title="头像" center>
          <van-uploader
            :file-list="fileList"
            max-count="1"
            accept="image"
            @after-read="aaa"
          />
        </van-cell>
      </div>
      <van-cell-group>
        <van-field
          :value="user.nickname"
          @change="(e) => (user.nickname = e.mp.detail)"
          label="用户名"
          required
          placeholder="请输入用户名"
        />
        <van-field
          :value="user.phone"
          @change="(e) => (user.phone = e.mp.detail)"
          label="手机号"
          required
          placeholder="请输入手机号"
          border="false"
        />
        <van-field
          :value="user.password"
          @change="(e) => (user.password = e.mp.detail)"
          type="password"
          label="密码"
          placeholder="请输入密码"
          required
          border="false"
        />
        <van-field
          :value="user.code"
          @change="(e) => (user.code = e.mp.detail)"
          center
          required
          clearable
          label="短信验证码"
          placeholder="请输入短信验证码"
          border="false"
          use-button-slot
        >
          <van-button
            slot="button"
            size="small"
            type="primary"
            @click="sendCode"
            >发送验证码</van-button
          >
        </van-field>
      </van-cell-group>
    </div>

    <div class="button">
      <van-button
        square
        plain
        type="info"
        custom-style="width:50%"
        @click="login"
        >登录</van-button
      >
      <van-button
        square
        type="primary"
        custom-style="width:50%"
        @click="register"
        >注册</van-button
      >
    </div>
  </div>
</template>

<script>
import request from "../../utils/request";

export default {
  data() {
    return {
      user: {},
      fileList: [],
    };
  },

  methods: {
    login() {
      wx.navigateTo({
        url: "/pages/login/main",
      });
    },

    async register() {
      let response = await request({
        url: `/user_service/register`,
        method: "POST",
        data: this.user,
      });

      if (response.success === false) {
        wx.showToast({
          title: "注册失败",
          icon: "loading",
        });
      } else {
        this.login();
      }
    },

    async sendCode() {
      let response = await request({
        url: `/aliyun-service/sendCode/${this.user.phone}`,
        method: "GET",
      });
    },

    aaa(event) {
      console.log(10);
      console.log(event);
      const file = event.detail;
      // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
      wx.uploadFile({
        url: "http://127.0.0.1//aliyun-service/uploadImage", // 仅为示例，非真实的接口地址
        filePath: file.url,
        name: "file",
        header: {
          "Content-Type": "multipart/form-data",
        },
        success(res) {
          console.log(1);
          this.user.avatar = res.data.url;
          // 上传完成需要更新 fileList
          this.fileList = [];
          fileList.push(res.data.url);
        },
        fail: function (res) {
          console.log(res);
          wx.hideLoading();
          wx.showModal({
            title: "错误提示",
            content: "上传图片失败",
            showCancel: false,
            success: function (res) {},
          });
        },
        complete: function () {
          i++;
          if (i == upLength) {
            wx.hideLoading(); //上传结束，隐藏loading
          } else {
            that.upLoad(imgPath, i, upLength);
          }
        },
      });
    },
  },
};
</script>

<style>
.logo {
  text-align: center;
}
.container {
  position: relative;
  height: 100%;
}
.button {
  position: absolute;
  bottom: 0;
  display: inline-block;
  width: 100%;
}
.cover {
  text-align: left;
}
</style>
